<template>
    <div>
        <a-button type="primary" @click="showModal()">展开详细汇总信息</a-button>
        <a-modal
                :visible="visible"
                :confirm-loading="confirmLoading"
                width="1000px"
                @ok="handleOk"
                @cancel="handleCancel">
            <div>已选择{{}}项  总计：</div>
            <div>
                <a-card
                        style="width:100%"
                        :tab-list="tabListNoTitle"
                        :active-tab-key="noTitleKey"
                        @tabChange="key => onTabChange(key, 'noTitleKey')">
                    <p v-if="noTitleKey === 'all'">
                        <span style="display:block">
                          <div class="container" style="overflow:scroll;padding-top:50px">
                            <table border="1" cellspacing="0">
                            <tr>
                            <!-- <th>分公司名称</th> -->
                            <th>成果分类</th>
                            <th>成果等级</th>
                            <th>计划数量</th>
                            <th>审核通过数量</th>
                            <th>工作完成率</th>
                            <th>获得成果数量</th>
                            <th>成果获得率</th>
                            </tr>

                            <tr v-for="(item,itemIndex) in mydata" :key="itemIndex">
                            <!-- <td v-if="item.orgName" :rowspan="item.rowspan1">
                            {{item.orgName}}
                          </td> -->
                          <td v-if="item.typeName" :rowspan="item.rowspan2">
                            {{item.typeName}}
                          </td>

                          <td>{{item.levelName}}</td>
                          <td>{{item.planNum}}</td>
                          <td>{{item.completeCount}}</td>
                          <td>{{item.getArchiveRate}}</td>
                          <td>{{item.getNum}}</td>
                          <td>{{item.completeRate}}</td>
                          </tr>
                          </table>
                        </div>
                        </span>
                                            </p>
                                            <p v-else-if="noTitleKey === 'company'">
                          <span style="display:block">
                          <div class="container" style="overflow:scroll;padding-top:50px">
                          <table border="1" cellspacing="0">
                            <tr>
                              <th>分公司名称</th>
                              <th>成果分类</th>
                              <th>成果等级</th>
                              <th>计划数量</th>
                              <th>审核通过数量</th>
                              <th>工作完成率</th>
                              <th>获得成果数量</th>
                              <th>成果获得率</th>
                            </tr>

                            <tr v-for="(item,itemIndex) in mydata" :key="itemIndex">
                              <td v-if="item.orgName" :rowspan="item.rowspan1">
                              {{item.orgName}}
                            </td>
                            <td v-if="item.typeName" :rowspan="item.rowspan2">
                              {{item.typeName}}
                            </td>

                            <td>{{item.levelName}}</td>
                            <td>{{item.planNum}}</td>
                            <td>{{item.completeCount}}</td>
                            <td>{{item.getArchiveRate}}</td>
                            <td>{{item.getNum}}</td>
                            <td>{{item.completeRate}}</td>
                          </tr>
                        </table>
                        </div>
                      </span>
                    </p>
                    <p v-else-if="noTitleKey === 'project'">
                        <span style="display:block">
                          <div class="container" style="overflow:scroll;padding-top:50px">
                            <table border="1" cellspacing="0">
                              <tr>
                                <th>项目名称</th>
                                <th>成果分类</th>
                                <th>成果等级</th>
                                <th>计划数量</th>
                                <th>审核通过数量</th>
                                <th>工作完成率</th>
                                <th>获得成果数量</th>
                                <th>成果获得率</th>
                              </tr>

                              <tr v-for="(item,itemIndex) in mydata" :key="itemIndex">
                                <td v-if="item.projectName" :rowspan="item.rowspan1">
                                {{item.projectName}}
                                </td>
                                <td v-if="item.typeName" :rowspan="item.rowspan2">
                                  {{item.typeName}}
                                </td>

                                <td>{{item.levelName}}</td>
                                <td>{{item.planNum}}</td>
                                <td>{{item.completeCount}}</td>
                                <td>{{item.getArchiveRate}}</td>
                                <td>{{item.getNum}}</td>
                                <td>{{item.completeRate}}</td>
                              </tr>
                            </table>
                          </div>
                        </span>
                    </p>
                </a-card>
            </div>
        </a-modal>
    </div>
</template>
<script>
  import Table from './table'
  import {data} from '../../plots/dataList'
  export default {
    name:'a'+ Date.now(),
    components:{
      Table,
    },
    data(){
      this.data = data
      return{
        visible: false,
        mydata: [],
        confirmLoading:false,
        tabList: [
          {
            key: 'tab1',
            scopedSlots: { tab: 'customRender' },
          },
          {
            key: 'tab2',
            tab: 'tab2',
          },
        ],
        contentList: {
          tab1: 'content1',
          tab2: 'content2',
        },
        tabListNoTitle: [
          {
            key: 'all',
            tab: '整体情况',
          },
          {
            key: 'company',
            tab: '按分公司汇总',
          },
          {
            key: 'project',
            tab: '按项目汇总',
          },
        ],
        key: 'tab1',
        noTitleKey: 'app',

      }
    },
    props:{
      simple:[Array]
    },
    created(){
      this.getList()
    },
    methods:{
      showModal(){
        this.visible = true
      },
      getList () {
        let data2 = data.data.total
        console.log(data2)
        data2 = data2.map(item => {
          let rows = 0
          item.type.forEach(item2 => {
            rows += item2.level.length
          })
          item.rowspan = rows
          return item
        })

        let dataList = []

        data2.forEach((item, itemIndex) => {

          item.type.forEach((typeItem, typeIndex) => {

            typeItem.level.forEach((levelItem, levelIndex) => {
              if (typeIndex===0 && levelIndex === 0) {
                dataList.push({
                    rowspan1: item.rowspan,
                    orgName:item.orgName,
                    projectName:item.projectName,
                    rowspan2: typeItem.level.length,
                    "typeName": typeItem.typeName,
                    ...levelItem
                  }
                )
              }
              else if (levelIndex === 0) {
                dataList.push({
                    rowspan2: typeItem.level.length,
                    "typeName": typeItem.typeName,
                    ...levelItem
                  }
                )
              } else {
                dataList.push(levelItem)
              }
            })
          })
        })

        this.mydata = dataList
      },
      handleCancel(){
        this.visible = false
      },
      handleOk(){
        console.log("ok")
      },
      onTabChange(key, type) {
        console.log(key);
        if(key==="all"){
          this.type=1
        }else if(key==="company"){
          this.type ===2
        }else{
          this.type=3
        }
        this[type] = key;
      },
    }
  }
</script>